<template>
	<view class="bg-gray">
		<view class="width">
			<carousel :res="carouselImage" class="bgshare" height='340' />
		</view>
		<view class="bg-white ruzhiinfo width commonbg">
			<view class="flex-row-between boxitem">
				预约日期
				<view @click="showPicker = true">
				  {{chooseTime}}
				  <u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="flex-row-between boxitem" v-if="type == 2">
				包间类型
				<view @click="chesspicker = true">
				  {{ chess }}
				  <u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="flex-row-between boxitem">
				预约时段
				<view @click="showDate = true">
				  {{chooseDate}}
				  <u-icon name='arrow-right'></u-icon>
				</view>
			</view>
		</view>
		<view class="bg-white ruzhiinfo width commonbg">
			<view class="flex-row-between boxitem">
				包间号/桌号
				<view @click="chessShow = true">
				  {{gameId}}
				  <u-icon name='arrow-right'></u-icon>
				</view>
			</view>
		</view>
		<bottomsubmit title='确认支付' price='0' @pay='submit'></bottomsubmit>
		<u-picker
			 v-model="showPicker"
			 mode="time" 
			 :confirm-color="lightColor" 
			 start-year='2025'
			 :params='params'
			 @confirm="timeConfirm">
		</u-picker>
		
		<u-picker
		  v-model="chesspicker"
		 :range='prRoomType'
		 mode="selector"
		@confirm="chessMode"></u-picker>
		<!--时间选择-->
		<u-select v-model="showDate" mode="mutil-column" :list="listDate" @confirm="confirmdate" :confirm-color='lightColor'></u-select>
		<!--包间选择-->
		<u-select v-model="chessShow" 
		 value-name='no'
		 label-name='no'
		 :list="chessList" @confirm="confirmChess" :confirm-color='lightColor'></u-select>
	</view>
</template>

<script>
import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; //导航栏模块
import bottomsubmit from "@/components/huashuiwan/bottomsubmit.vue"; 
import storage from "@/utils/storage.js"; //缓存
import { getChess,placeOrder } from "@/api/game";
export default { 
	data() {
		return {
			carouselImage:[
				{ name:'https://www.haopengsong.xyz/static/gameorder.jpg'}
				//{ name:'https://www.haopengsong.xyz/static/game/bg.png'}
			],
			endtime:'',
			//keyName:'communityName',//弹窗自定义name
			showDate: false,
			chooseDate:'请选择',
			gameId:'请选择',
			type:1,
			total:0,
			chesspicker:false,
			chooseTime:'请选择',
			chess:'请选择',
			chessShow:false,
			chessList:[],
			lightColor:'#499C43',
			params:{
				year: true,
				month: true,
				day: true,
			/* 	hour: true,
				minute: true,
				second: false, */
				// 选择时间的时间戳
				timestamp: true,
			},
			timeLength:0,
			//时间弹窗
			showPicker:false,
		};
	},
	components: {
		bottomsubmit,
		carousel: tpl_banner
	},
	computed: {
		  prRoomType: {
		    get() {
		      return this.$store.state.common.prRoomType
		    },
		  },
		  listDate: {
		    get() {
		      return [this.$store.state.common.gameDate,this.$store.state.common.gameDate]
		    },
		  }
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		this.type = options.type
		if(this.type == 2){
			this.carouselImage[0].name = 'https://www.haopengsong.xyz/static/gameorder1.png'
		}
	},
	watch:{
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		this.getList()
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		/** 桌号列表 **/
		getList(){
			let data = {
				chessType:this.type == 1 ? 2 : 1,
			}
			let type = this.chess == '请选择' ? '' : this.chess
			if(this.type == 2 && type){
				data.prRoomType = this.prRoomType.filter(v=>v.name == type)[0].type
			}
			getChess(data).then(res=>{
				this.chessList = res
			})
		},
		/** 桌号选择**/
		confirmChess(res){
			this.gameId = res[0]['value']
			this.total = this.chessList.filter(v=>v.no == res[0]['value'])[0].housPrice*this.timeLength
		},
		confirmdate(res){
			this.timeLength = parseInt(res[1]['label'].split(":00")[0])-parseInt(res[0]['label'].split(":00")[0])
			if(this.timeLength < 0){
				uni.showToast({
					title: "开始时间不能大于结束时间，请重新选择",
					icon: "none",
					duration: 1500,
				});
			}else{
				if(this.gameId!=='请选择'){
					this.total = this.chessList.filter(v=>v.no == this.gameId)[0].housPrice*this.timeLength
				}
				this.chooseDate = res[0]['label']+' - '+res[1]['label']
			}
			let time = parseInt(res[1]['label'].split(':')[0])
			if(time > 10){
				time = time-1
			}else{
				time = time-1
			}
			this.endtime = time > 10 ? time+':59:59' : '0'+time+':59:59'
		},
		/**
		 * 时间选择
		 */
		timeConfirm(res){
			this.chooseTime = res.year+'-'+res.month+'-'+res.day
		},
		chessMode(res){
			this.chess = this.prRoomType[res]['name']
			this.getList()
		},
		submit(){
			if(this.gameId=='请选择'){
				uni.showToast({
					title: "选择房间！",
					icon: "none",
					duration: 1500,
				});
				return false
			}
			if(this.chooseTime=='请选择'){
				uni.showToast({
					title: "选择日期！",
					icon: "none",
					duration: 1500,
				});
				return false
			}
			let data = {
				id:this.chessList.filter(v=>v.no == this.gameId)[0].id,
				appHour:this.timeLength,
				appStartDate:this.chooseTime+' '+this.chooseDate.split(' - ')[0]+':00',
				appEndDate:this.chooseTime+' '+this.endtime,
			}
			 placeOrder(data).then(res=>{
				 uni.showToast({
				 	title: "预定成功,请在订单里查看信息！",
				 	icon: "none",
				 	duration: 1500,
				 });
				 setTimeout(function () {
					 uni.navigateTo({
					 	url:'/pages/myorder/index'
					 })
				 },2000)
			 })
		}
	}
};
</script>

<style scoped lang="scss">
	.commonbg{
		padding: 0 20px;
		border-radius: 12px;
		margin-bottom: 14px;
		.line{
			width: 4px;
			height: 16px;
			background-color: #499C43;
			margin-right: 5px;
		}
	}
	.boxitem{
		padding: 15px 0px;
		border-bottom: 1px solid #F6F6F6;
		.liuyan{
			border: 1px solid #F6F6F6;
			margin-top: 10px;
			padding: 10px;
		}
	}
	.boxitem:last-child{
		border:none;
	}
	.yuyue{
		margin-top: 12px;
		.time{
			width: 49%;
			overflow: hidden;
			background-color: #F4F6F8;
			padding: 8px 10px;
			border-radius: 8px;
			border:1px solid #dddddd60;
			position: relative;
			margin-bottom: 8px;
		}
		.shape{
			width: 24px;
			height: 14px;
			border-radius: 12px  0  8px  0px;
			background-color: #499C43;
			position: absolute;
			line-height: 14px;
			text-align: center;
			color: #fff;
			font-size: 12px;
			right: 0;
			bottom: 0;
			display: none;
		}
		.time:nth-child(1){
			border-color: #499C43;
			background-color: #E5F6E6;
			.shape{
				display: block;
			}
		}
	}
	.submitbtn{
		.yellow{
			padding: 0 5px 0 10px;
		}
		width: 100%;
		position: fixed;
		bottom: 0px;
		left:0;
		background-color: #fff;
		box-shadow: 0px -2px 0px 1px #EEEEEE;
		padding: 8px 10px;
		.yudin{
			width: 124px;
			height: 40px;
			background-color: #499C43;
			text-align: center;
			line-height: 40px;
			color:#fff;
			border-radius: 40px;
			font-size: 16px;
		}
	}
</style>